<template>
  <div>
    <el-card shadow="hover" class="box-card">
      <div id="userAge" style="width: 500px;height:400px;"></div>
      <div id="userClick" style="width: 500px;height:400px;"></div>
    </el-card>
    <div id="user"></div>
  </div>
</template>

<script>
export default {
  mounted () {
    this.drawline_userAge()
    this.drawline_userClick()
  },
  created () {
    const token = sessionStorage.getItem('accessToken')
    if (!token) {
      this.$message.warning('请先登录')
      this.$router.push({ name: 'login' })
    }
    this.managerNickName = sessionStorage.getItem('managerNickName')
  },
  methods: {
    drawline_userAge () {
      let userAge = this.$echarts.init(document.getElementById('userAge'))
      // 绘制图表
      userAge.setOption({
        title: { text: '用户年龄数据' },
        tooltip: {},
        xAxis: {
          data: ['0-8', '9-17', '18-25', '26-35', '36-45', '46-55', '60+']
        },
        yAxis: {},
        series: [
          {
            name: '年龄',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20, 50]
          }
        ]
      })
    },
    drawline_userClick () {
      let userClick = this.$echarts.init(document.getElementById('userClick'))
      userClick.setOption({
        title: {
          text: '测试题类型及数目',
          //   subtext: '纯属虚构',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: [
            '人身安全',
            '用电安全',
            '交通安全',
            '消防安全',
            '防盗安全',
            '其他'
          ]
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '人身安全' },
              { value: 310, name: '用电安全' },
              { value: 234, name: '交通安全' },
              { value: 135, name: '消防安全' },
              { value: 1548, name: '防盗安全' },
              { value: 123, name: '其他' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
#userClick {
  display: inline-block;
}
</style>
